<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 */
        /* div {
            color: rebeccapurple;
        }
        a {
            color: red;
        }
        span {
            color: brown;
        } */
        
        /* id 选择器 */
        /* #div4 {
            color: red;
        } */

        /* class选择器 */
        /* .font40 {
            font-size: 40px;
        } */

        /* 通配符选择器 */
        /* * {
            color: rebeccapurple;
        } */

        /* 复合选择器 */
        /* #div1, #div2 {
            color: red;
        } */

        /* li {
            color: red;
        } */

        /* ol li{
            color: red;
        } */

        /* a {
            color: red;
        } */

        /* ol a {
            color: red;
        }
        ul .first {
            color: green;
        } */

        /* #div3 a {
            color: red;
        }

        ol li a {
            color: green;
        } */

        /* css样式 */

        #div1 {
            /* color: rgb(255, 255, 0); */
            width: 500px;
            height: 200px;
            /* border-width: 1px 5px 10px 5px;
            border-style: solid;
            border-color: red green blue purple; */
            /* border-bottom-width: 10px;
            border-top-width: 1px;
            border-left-width: 5px;
            border-right-width: 5px; */
            border: solid red 1px;
            display: inline;
        }

        #div4 {
            display: block;
            width: 500px;
            height: 200px;
            border: solid red 1px;
        }



    </style>
</head>
<body>
    <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
    <span id="div4" class="font40">我是span</span>
    <ul>
        <li class="first">第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
    <ol>
        <li>有序第一个1</li>
        <li><a href="#">有序第二个2</a></li>
        <li>有序第三个3</li>
        <li>有序第四个4</li>
    </ol>
</body>
</html>